<template>
    <div class="main">
        <van-tabs :active="active" @change.native="changeTab">
            <van-tab title="未解决"></van-tab>
            <van-tab title="已解决"></van-tab>
        </van-tabs>
        <div class="flex-1">
            <xin-swipe-cell
                :title="feedback.title"
                :label="feedback.desc"
                v-for="(feedback, index) in ManageFeedback"
                :key="feedback._id"
                :button="swipeBtn"
                @click="XinClick($event, feedback, index)"
            >
            </xin-swipe-cell>
            <van-empty v-if="!ManageFeedback.length" description="没有信息哦">
            </van-empty>
        </div>

        <pagination :value="pageIndex" @change="changeFeedback"></pagination>
        <show-feedback
            :feedback="lookingFeedback.feedback"
            :editable="lookingFeedback.editable"
            :show="lookingFeedback.show"
            :canSave="true"
            @close="lookingFeedback.show = false"
            @taskDone="
                lookingFeedback.feedback.isDone =
                    !lookingFeedback.feedback.isDone
            "
            @save="saveFeedback"
        ></show-feedback>
    </div>
</template>

<script>
import vanTab from "@/wxcomponents/weapp/dist/tab/index";
import vanTabs from "@/wxcomponents/weapp/dist/tabs/index";
import { mapState } from "vuex";
import $store from "@/store/index";
import showFeedback from "@/components/showFeedback.vue";
export default {
    components: { vanTab, vanTabs, showFeedback },
    computed: {
        ...mapState({
            ManageFeedback: (state) => state.manager.ManageFeedback,
            pageIndex: (state) => state.manager.ManageFeedback.index + 1,
        }),
    },
    data() {
        return {
            lookingFeedback: {
                show: false,
                feedback: null,
                editable: false,
            },
            active: 0,
            swipeBtn: [{ type: "primary", name: "查看" }],
        };
    },
    mounted() {
        this.ManageFeedback.$to(0);
    },
    methods: {
        async saveFeedback() {
            await $store.commit(
                "updateFeedback",
                this.lookingFeedback.feedback
            );
            this.ManageFeedback.$refresh();
            this.lookingFeedback.show = false;
        },
        changeFeedback(index) {
            this.ManageFeedback.$to(index - 1);
        },
        changeTab({ detail }) {
            this.ManageFeedback.change();
        },
        XinClick({ detail }, feedback, index) {
            console.log(detail, feedback, index);
            this.lookingFeedback = {
                ...this.lookingFeedback,
                feedback,
                show: true,
            };
        },
    },
};
</script>

<style lang="less" scoped>
.main {
    height: 100%;
    display: flex;
    flex-direction: column;
}
</style>